<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="index.css">
    <script>
        let channelId=0;
        window.onload =function (){
            channelId=getQuery("channelId");
            findByItem(channelId,1,null,null,null,null);
        }
        //添加主题
        async function addTopic(){
            let topicName = $("topicName").value;
            let topicInfo = $("topicInfo").value;

            if(topicName.length>=20 ||topicInfo.length>=500){
                alert("标题最多20字\n内容最多500字");
                return;
            }
            let topicObj = {
                name:topicName,
                info:topicInfo,
                'user.id':0,
                'channel.id':channelId
            };
            alert("添加失败")
            let ad = await ajaxGet("/topic/add",topicObj);
            return ad;
        }

        //添加评论
        function addReplies(){
            if(user == null){
                alert("请先登录！");
                location.href="/html/add.html";
                return;
            }
            choiceDiv("addTopic");
        }

        //查找主题
        function findTopic(){
            let name = $("topicInput").value;
            let author = $("authorInput").value;
            let startDate = $("startDateInput").value;
            let endDate = $("endDateInput").value;

            findByItem(channelId,1,name,author,startDate,endDate);
        }

        async function findByItem(channelId,pageNo,name,author,startDate,endDate){
            let params = {channelId,pageNo,name, author, startDate, endDate}
            let info = await ajaxGet("/topic/findByItem",params);
            setThemeData(info);
        }

        function setThemeData(info){
            let str = "";
            for (let i = 0 ;i < info.list.length;i++){
                let obj = info.list[i];
                str += `<tr><td><a href="/html/findById.html?topicId=${obj.id}">${obj.name}</a></td>
            <td>${obj.author}</td><td>${obj.num}</td><td>${obj.date}</td></tr>`;
            }
            $("themeData").innerHTML = str;
            let cutPage ="";
            for (let i= 1;i <=info.pages;i++){

            }
            $("cutPageDiv").innerHTML = cutPage;
        }

    </script>
</head>
<body>

<div id="addTopic">
    <div class="HeadDiv">
        <span style="color: blue;margin-left: 365px">发表话题</span>
    </div>
    <span style="margin-left: 10px">主题：</span><input type="text" id="topicName"><br>
    <span style="margin-left: 10px">内容：</span><br>
    <textarea id="topicInfo" style="max-width:650px;max-height:140px;
            min-width:650px;min-height:140px; margin-left: 10px"></textarea>
    <div class="HeadDiv" style="height: 25px;">
        <input  type="button" value="发表" style="margin-left: 300px" onclick="addTopic()">
        <input  type="button" value="重置" style="margin-left: 50px">
        <input  type="button" value="返回" style="margin-left: 50px;">
    </div>
</div>

<div id="themeDiv">
    <span style="margin-left: 100px">主题名称</span><input  type="text" id="topicInput">
    <span>作    者</span><input type="text" id="authorInput">
    <span>起始日期</span><input type="date" id="startDateInput">
    <span>结束日期</span><input type="date" id="endDateInput">
    <input style="margin-left: 400px;height: 25px" type="button" value="搜索" onclick="findTopic()">
    <input  style="margin-left: 190px;height: 25px" type="button" value="发表话题" onclick="addReplies()">
    <div class="navigation">
        <a style="margin-left: 10px ;font-size: 13px" href="/html/mune.html">我的论坛</a>
    </div>
    <div id="theadTableDiv">
        <table border="0"  width="780px"   cellpadding="0">
            <thead class="thead"><tr style="height: 30px" ><th>主题</th><th>作者</th><th>回帖数量</th><th>发帖时间</th></tr></thead>
            <tbody id="themeData"></tbody>
        </table>
    </div>
</div>
<!--<div>-->
<!--    <div id="replyDiv"></div>-->
<!--</div>-->
</div>

</body>
</html>